<template>
  <div style="padding:5px;width:100%;height: 100%;position: absolute;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-input style="width:250px;"
                v-model="queryParams.stationName"
                placeholder="请输入名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
      />
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left:20px;">搜索</el-button>
    </el-form>
    <baidu-map class="bm-view" ak="ZclHv6FqxCWUHNCHLgyh7fYW" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
      <!--聚合动态添加的点坐标-->
      <bm-marker-clusterer :averageCenter="true">
        <bm-marker v-for="marker of markers" :position="{lng: marker.longitude, lat: marker.latitude}" @click="viewInfoWindowOpen(marker)">
        </bm-marker>
      </bm-marker-clusterer>
      <!--信息窗体-->
      <bm-info-window :position="{lng: marker.longitude, lat: marker.latitude}" :title="marker.stationName" :width="400" style="font-size:16px;" :show="marker.show" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
        <hr />
        <p><span class="left">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span><span class="right">{{marker.contacts}}</span></p>
        <p><span class="left">联系电话：</span><span class="right">{{marker.telephone}}</span></p>
        <p><span class="left">联系地址：</span><span class="right">{{marker.address}}</span></p>
        <p><span class="left">总运单数：</span><span class="right">{{marker.billNum}}单</span></p>
        <p><span class="left">称重总重：</span><span class="right">{{marker.weightTotal}}吨</span></p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
  import { stationLocation } from "@/api/map/station";
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmScale from 'vue-baidu-map/components/controls/Scale'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  export default {
    components: {
      BaiduMap,
      BmScale,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
      BmInfoWindow
    },
    data () {
      return {
        center: {lng: 120.321744, lat: 31.499795},
        zoom: 13,
        markers:[],
        marker:{},
        queryParams: {
          stationName: undefined,
        },
        dept:{},
        // 场站信息表格数据
        stationList: [],
      }
    },
    created() {
      const dept = this.$store.getters && this.$store.getters.dept;
      this.dept = dept;
    },
    methods: {
      handler ({BMap, map}) {
        if(this.dept.areaCode == '320205'){
          this.center.lng = 120.386245;
          this.center.lat = 31.649358;
        }else if(this.dept.areaCode == '320206'){
          this.center.lng = 120.214877;
          this.center.lat = 31.677004;
        }else if(this.dept.areaCode == '320214'){
          this.center.lng = 120.363132;
          this.center.lat = 31.550385;
        }else if(this.dept.areaCode == '320211'){
          this.center.lng = 120.248502;
          this.center.lat = 31.466579;
        }else if(this.dept.areaCode == '320213'){
          this.center.lng = 120.307874;
          this.center.lat = 31.573121;
        }else if(this.dept.areaCode == '320281'){
          this.center.lng = 120.310679;
          this.center.lat = 31.837425;
        }else if(this.dept.areaCode == '320282'){
          this.center.lng = 119.790265;
          this.center.lat = 31.362245;
        }
        this.getStationList();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        stationLocation(this.queryParams).then(response => {
          this.markers = [];
          response.data.forEach((item, i) => {
            item.show = false;
            this.markers.push(item);
          });
          if(this.markers.length > 0){
            this.infoWindowOpen(this.markers[0]);
          }
        });
      },
      getStationList(){
        stationLocation(this.queryParams).then(response => {
          this.markers = [];
          response.data.forEach((item, i) => {
            item.show = false;
            this.markers.push(item);
          });
        });
      },
      infoWindowClose(marker){
        this.marker = marker;
        this.marker.show =false;
        console.info(marker.stationName);
      },
      infoWindowOpen(marker){
        console.info(marker.stationName);
        this.marker = marker;
        this.center={lng: marker.longitude, lat: marker.latitude};
        this.zoom = 15;
        this.marker.show =true;
      },
      viewInfoWindowOpen(marker){
        if(this.markers.length != 1){
          this.marker = marker;
        }
        this.center={lng: marker.longitude, lat: marker.latitude};
        this.zoom = 15;
        this.marker.show =true;
      },
    }
  }
</script>

<style>
  .bm-view {
    width: 100%;
    height: 95%;
    margin-top:5px;
    overflow: hidden;
  }
  p{
    font-size: 12px;
  }
</style>
